<template>
    <div class="main-content">
        <div class="item" v-for="(item, index) in 20" :key="index">
            {{ `第${item}个元素` }}
        </div>
    </div>
</template>
<script setup>

</script>
<style lang="scss" scoped>
.main-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    .item {
        flex: 0 0 calc(25% - 10px);
        aspect-ratio: 2/1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        border-radius: 5px;
        background-color: var(--el-color-primary-light-7);
    }
}
</style>